<template>
  <div class="todaHeader">
      <input class="form-control" type="text" placeholder="请输入你的任务名称，按回车健确认" v-model="title" @keyup.enter="add">
  </div>
</template>

<script>
    import 'bootstrap/dist/css/bootstrap.min.css'
    import 'bootstrap/dist/js/bootstrap.min.js'

    import {nanoid} from 'nanoid'
    export default {
        name:'MyHeader',
        data() {
            return {
                title: '',
            };
        },
        methods:{
            add(){
                //校验数据
                if(!this.title.trim()) return alert('输入不能为空！')
                //将用户的输入包装成一个todo对象
                const todoObj={
                    id:nanoid(),
                    title:this.title,
                    done:false
                }
                // 通知app组件去添加一个todo对象，该方法是父组件传给子组件的，提供给子组件调用
                this.$emit('addToda', todoObj);
                // 清空文本框数据
                this.title=''
            }
        },
        
    }
</script>

<style scoped>
    .todaHeader{
        margin: 0 auto;
        margin-top: 20px;
        width: 30%;
    }
</style>